<template>
  <el-row
    title="点击查看更多信息"
    @click="() => { emit('openDrawer', data.id) }"
    :class="{
      'todo-item': true,
      'active': data.done
    }"
  >

    <div title="标记为完成" class="check" @click.stop="doneFn">
      <span class="circle" >
        <el-icon><Select /></el-icon>
      </span>
    </div>

    <div class="content">{{ data.content }}</div>

    <div class="star" title="标记为重要" @click.stop="starFn">
      <el-icon class="star-filled" >
        <Star-Filled v-show="data.star"></Star-Filled>
        <Star v-show="!data.star"></Star>
      </el-icon>
    </div>

  </el-row>
</template>
  
<script lang="ts" setup>
import { doneApi, starApi } from '@/api/todo';
import { SUCCESS_CODE } from '@/config/requestCode'
import type { Todo } from '@/types/types'
import { openMessage } from '@/utils/elComponents'

const emit = defineEmits([ 'openDrawer' ])
const { data, changeTodo, loading } = defineProps<{
  data: Todo,
  changeTodo: (type: 'done' | 'star', todoId: number, status: number) => void,
  loading: (loading: boolean) => void
}>()

const doneFn = async () => {
  loading(true)
  const resp = await doneApi([data.id, data.done === 1 ? 0 : 1])
  if (resp && resp.code == SUCCESS_CODE) {
    openMessage(
      data.done ? 'info' : 'success',
      data.done ? `已将"${data.content}"变更为未完成!` : `已完成"${data.content}"!`
    )
    changeTodo('done', data.id, data.done === 1 ? 0 : 1)
  } else {
    openMessage('error', '服务器错误!')
  }
  loading(false)
}
const starFn = async () => {
  loading(true)
  const resp = await starApi([data.id, data.star === 1 ? 0 : 1])
  if (resp && resp.code == SUCCESS_CODE) {
    openMessage(
      data.star ? 'info' : 'success',
      data.star ? `已取消"${data.content}"的重要标记!` : `已标记"${data.content}"为重要!`
    )
    changeTodo('star', data.id, data.star === 1 ? 0 : 1)
  } else {
    openMessage('error', '服务器错误!')
  }
  loading(false)
}
</script>

<style lang="scss" scoped>
$height: 40px;

.todo-item {
  height: $height;
  margin-bottom: 4px;
  background: #fff;
  border-radius: $border-radius;
  cursor: pointer;

  &.active {
    .check {
      .circle {
        background-color: #5E5F60;
        ::v-deep(.el-icon) {
          color: #fff;
          font-weight: bolder;
          opacity: 1;
        }
        &:hover {
          ::v-deep(.el-icon) {
            color: #fff;
          }
        }
      }
    }
    .content {
      color: #777777;
      text-decoration: line-through;
    }
  }

  .check {
    position: relative;
    height: 100%;
    width: 40px;
    text-align: center;
    line-height: $height;
    flex-grow: 0;
    
    .circle {
      position: absolute;
      display: block;
      width: 20px;
      height: 20px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      border: 2px solid #5E5F60;
      cursor: pointer;
      @include transition('background-color', $default-transition-duration);
      background: #fff;

      ::v-deep(.el-icon) {
        font-size: 14px;
        position: relative;
        top: 1px;
        opacity: 0;
        @include transition('opacity', $default-transition-duration);
      }

      &:hover {
        ::v-deep(.el-icon) {
          color: $text-color;
          opacity: 1;
        }
      }
    }
  }
  .content {
    flex-grow: 1;
    line-height: $height;
    text-align: left;
    padding: 0 2%;
    font-size: 14px;
    color: $text-color;
    &.active {
      text-decoration: line-through;
    }
  }
  .star {
    flex-grow: 0;
    width: 40px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: $text-color;
    ::v-deep(.el-icon) {
      cursor: pointer;
    }
    .star-filled {
      font-size: 19px;
    }
  }
}
</style>
